<template>
  <div>
    <el-tabs v-model="tabActiveName">
      <el-tab-pane label="地表" name="first">
        <div>
          <el-checkbox v-model="isEnableUnderground" style="margin: 0 6px" @change="sceneUndergroundMode">开启地下模式</el-checkbox>
        </div>
        <hr class="dividingline">
        <el-row>
          <el-col :span="5"><span style="display: block;font-size: 14px;line-height: 36px;vertical-align: center;margin: 0 4px">透明度：</span></el-col>
          <el-col :span="19"><el-slider v-model="globeAlpha" style="margin: 0 4px 0 12px" @change="setGlobeAlpha"/></el-col>
        </el-row>
        <hr class="dividingline">
        <el-row :gutter="4">
          <el-col :span="12">
            <el-button
              class="kfb-icon-arrow-down-outline font-extras"
              style="width: 100%"
              type="primary"
              size="mini"
              @click="excavationTerrain()"
            > 地面开挖
          </el-button></el-col>
          <el-col :span="12">
            <el-button
              class="el-icon-delete font-extras"
              style="width: 100%"
              type="warning"
              size="mini"
              @click="clearExcavationTerrain()"
            > 清除开挖
          </el-button></el-col>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="卷帘" name="second">
        <div style="max-height: 100px;overflow-y: scroll;overflow-x: hidden">
          <el-tree
            ref="tree2"
            :data="layerTree"
            :props="defaultProps"
            :default-expanded-keys="[1]"
            class="filter-tree"
            show-checkbox
            render-after-expand
            highlight-current
            node-key="_id"
            @check="nodeCheck"
          />
        </div>

        <el-row>
          <el-radio-group v-model="switchType" size="small" class="sceneSwitchType" @change="switchTypeChange">
            <el-radio label="场景卷帘"/>
            <el-radio label="图层卷帘"/>
          </el-radio-group>
        </el-row>

        <hr class="dividingline">

        <el-row>
          <el-radio-group v-model="switchDirection" size="small" class="sceneSwitchType" @change="switchDirectionChange">
            <el-radio label="横向卷帘"/>
            <el-radio label="纵向卷帘"/>
          </el-radio-group>
        </el-row>

        <el-row>
          <el-button
            class="el-icon-delete font-extras bottom-extras"
            type="warning"
            size="small"
            @click="closeSwitch()"
          > 复位
          </el-button>
        </el-row>
      </el-tab-pane>
      <el-tab-pane label="分屏" name="third"/>
    </el-tabs>

  </div>
</template>

<script>
  import { mapState } from 'vuex'
  import Clone from '@/utils/clone'
  export default {
    name: 'Index',
    data: function() {
      return {
        /**
         * 卷帘方式
         */
        switchType: '',
        /**
         * 卷帘方向
         */
        switchDirection: '横向卷帘',
        defaultProps: {
          children: 'layers',
          label: 'name'
        },
        /**
         * 开启地下开关
         */
        isEnableUnderground: false,
        /**
         * 地表透明度
         */
        globeAlpha: 0,
        tabActiveName: 'second'
      }
    },
    methods: {

      /**
       * 清除卷帘
       */
      closeSwitch() {
        this.sceneTool.cancelSwitch()
      },
      /**
       * 解析图层url参数
       * @param url
       * @private
       */
      _parseLayerUrlParam(url) {
        if (url) {
          const urlArray = url.split('?')
          try {
            var obj = JSON.parse(
              '{"' +
              decodeURIComponent(urlArray[urlArray.length - 1])
                .replace(/"/g, '\\"')
                .replace(/&/g, '","')
                .replace(/=/g, '":"') +
              '"}'
            )
          } catch (e) {
            console.log('图层URL参数配置不正确，不能正常解析的JSON')
            return {}
          }
          return obj
        }
      },
      /**
       * 控制图层开闭
       * @param data
       * @param Node
       */
      async nodeCheck(data, Node) {
      },
      /**
       * 卷帘类型切换
       */
      switchTypeChange() {

        this.sceneTool.changeSwitchType(this.switchType, this.switchDirection)
      },
      /**
       * 卷帘方向切换
       */
      switchDirectionChange() {
        this.sceneTool.changesSwitchDirection(this.switchDirection)
      },
      /**
       *开启地下
       */
      sceneUndergroundMode(state) {
        this.sceneTool.setSceneUnderground(this.isEnableUnderground)
      },
      /**
       *设置地表透明度
       */
      setGlobeAlpha(value) {
        this.sceneTool.setGlobeAlpha((100 - this.globeAlpha) / 100.0)
      },
      /**
       *地面开挖
       */
      excavationTerrain() {
        this.sceneTool.excavationTer()
      },
      /**
       *清除开挖
       */
      clearExcavationTerrain() {
        this.sceneTool.clearExcavationTer()
      }
    },
    computed: {
      ...mapState({
        /**
         * 图层数据结构
         * @param state
         * @returns {any[]}
         */
        layerTree(state) {
          let layers = []
          state.user.subjectData.forEach(dist => {
            layers = layers.concat(dist.groups)
          })
          return layers.map(o => Clone.clone(o)).filter((o, i, a) => {
            const layers = o.layers.filter(l => {
              const p = this._parseLayerUrlParam(l.url)
              return l.url.indexOf('tileFeature') >= 0 && p && p.search_layer
            })
            o.layers = layers
            return layers.length > 0
          })
        },
        /**
         * 场景控件
         * @param state
         * @returns {any[]}
         */
        sceneViewer(state) {
          return state.eswyzt.sceneViewer
        },
        /**
         * 场景工具类
         * @param state
         * @returns {any[]}
         */
        sceneTool(state) {
          return state.eswyzt.sceneTool
        }
      })
    },
    mounted() {

    }
  }
</script>

<style scoped>
  .bottom-extras {
    margin-bottom: 5px;
    width: 100%;
  }

  .dividingline {
    margin: 5px 1px;
    background-color:#E4E7ED;
    height: 1px;
    border: none;
  }

  .font-extras{
    font-size: 14px;
    margin: 2px 0;
  }

  .sceneSwitchType{
    display: block !important;
    padding: 4px 0;
    text-align: center;
  }
</style>
